<div class="standard-div rows">
  <div class="row">
    <div class="row-title">
      <span i18n="@@common.name">Name</span>
      <nz-tag nzColor="blue">Key: {{currentOrganization.key}}</nz-tag>
    </div>

    <form class="row-content" nz-form [formGroup]="organizationForm" [nzLayout]="'inline'" (ngSubmit)="updateOrganizationName()">
      <nz-form-item class="extend">
        <nz-form-control nzErrorTip="Name cannot be empty" i18n-nzErrorTip="@@common.name-cannot-be-empty">
          <nz-input-group class="row-input-group" [nzPrefix]="orgIcon">
            <input type="text" nz-input formControlName="name" placeholder="Organization name" i18n-placeholder="@@org.org.orgNamePlaceholder"/>
            <ng-template #orgIcon>
              <i nz-icon nzType="icons:icon-org"></i>
            </ng-template>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <button nz-button nzType="primary" [nzLoading]="isLoading" [disabled]="!canUpdateOrgName">
        <i nz-icon nzType="icons:icon-sync"></i>
        <ng-container i18n="@@org.org.updateOrgName">Update</ng-container>
      </button>
    </form>
  </div>
  <div class="row">
    <div class="row-title" i18n="@@org.org.switchorg">Switch organization</div>
    <div class="row-content">
      <nz-select class="nz-select-40 extend" nzShowSearch nzPlaceHolder="Select organization" [(ngModel)]="currentOrganization" (ngModelChange)="onOrganizationChange()" i18n-nzPlaceHolder="@@org.org.selectOrg">
        <nz-option *ngFor="let org of allOrganizations" [nzLabel]="org.name" [nzValue]="org"></nz-option>
      </nz-select>
      <button class="create-org-btn" [disabled]="!license.isGranted(LicenseFeatureEnum.MultiOrg) || !canCreateOrg" nz-button nzType="primary" (click)="onCreateOrganizationClick()">
        <i nz-icon nzType="icons:icon-add"></i>
        <ng-container i18n="@@common.add">Add</ng-container>
      </button>
    </div>
  </div>
</div>
<div class="standard-div rows">
  <h5 nz-typography>
    <ng-container i18n="@@common.default-permissions">Default permissions</ng-container>
    <span style="margin-left: 4px; color: #ff4d4f" *ngIf="defaultPermissionsForm.errors?.empty" i18n="@@org.org.policy-group-set-at-least-one">(Policy and group cannot be both empty)</span>
  </h5>
  <form nz-form [formGroup]="defaultPermissionsForm" [nzLayout]="'vertical'" (ngSubmit)="updateDefaultPermissions()">
    <nz-form-item>
      <nz-form-label i18n="@@org.org.policy">Policy</nz-form-label>
      <nz-form-control>
        <nz-select
          class="nz-select-40"
          nzShowSearch
          nzServerSearch
          i18n-nzPlaceholder="@@org.org.policy-placeholder"
          nzPlaceHolder="Policy"
          (nzOnSearch)="getPolicies($event)"
          formControlName="policyId">
          <ng-container *ngFor="let policy of policies.items">
            <nz-option nzCustomContent *ngIf="!isPoliciesLoading" [nzLabel]="policy.name" [nzValue]="policy.id">
              <i *ngIf="policy.type === 'SysManaged'" style="color: #28a17d;" nz-icon nzType="star" nzTheme="outline"></i>
              {{ policy.name }}
            </nz-option>
          </ng-container>
          <nz-option *ngIf="isPoliciesLoading" nzDisabled nzCustomContent>
            <i nz-icon nzType="loading" class="loading-icon"></i> <ng-container i18n="@@common.loading">Loading...</ng-container>
          </nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label i18n="@@org.org.group">Group</nz-form-label>
      <nz-form-control style="margin-top: 10px;">
        <nz-select
          class="nz-select-40"
          nzShowSearch
          nzServerSearch
          i18n-nzPlaceholder="@@org.org.group-placeholder"
          nzPlaceHolder="Group"
          (nzOnSearch)="getGroups($event)"
          formControlName="groupId">
          <ng-container *ngFor="let group of groups.items">
            <nz-option *ngIf="!isGroupsLoading" [nzLabel]="group.name" [nzValue]="group.id"></nz-option>
          </ng-container>
          <nz-option *ngIf="isGroupsLoading" nzDisabled nzCustomContent>
            <i nz-icon nzType="loading" class="loading-icon"></i> <ng-container i18n="@@common.loading">Loading...</ng-container>
          </nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <button nz-button class="permissions-btn" nzType="primary" [nzLoading]="isDefaultPermissionsLoading" [disabled]="!canUpdateDefaultPermissions">
      <i nz-icon nzType="icons:icon-sync"></i>
      <ng-container i18n="@@common.update">Update</ng-container>
    </button>
  </form>
</div>
<organization-drawer [visible]="creatOrganizationFormVisible" (close)="onCreateOrganizationClosed($event)"></organization-drawer>
